<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
        <div class="contentView">
            <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh" @search="searchClick">
                <template #borrowed="scope">

                    <div>{{ scope.row.borrowed == true ? '已借' : '未借' }}</div>
                </template>
            </JsTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getBookList, borrowBook } from '@/api/login'



const searchClick = (params: any) => {
    const param = ref({
        pageSize: params.pageSize,
        pageNum: params.page,
        author: params.author,
        bookName: params.bookName
    })

    getBookList(param.value).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
        state.value.refresh = 0
    })
}

const borrowClick = (row: any) => {
    borrowBook(Number(row.id)).then((response: any) => {
        console.log('归还图书', response)
        state.value.refresh = 1
    })
}

onMounted(() => {
    state.value.refresh = 1;
})
const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '借阅书籍',
    columns: {
        props: [

            {
                name: "书名",
                key: "name",
            },

            {
                name: "作者",
                key: "author",
            },
            {
                name: "简介",
                key: "synopsis",
            },
            {
                name: "出版时间",
                key: "year_publication",
            },
            {
                name: "借阅状态",
                key: "borrowed",
            },
        ],
        options: {
            width: 'auto',
            btns: [
                {
                    label: '借书',
                    key: 'borrow',
                    type: 'warning',
                    event: borrowClick
                },
            ],
        },
    },
    dataSource: [],

} as any)

const toolBar = ref<any>({
    form: {
        author: '',
        bookName: ''
    },
    input: [
        {
            label: '书名',
            key: 'bookName',
            placeholder: '请输入',
            el: 'input',
        },
        {
            label: '作者名',
            key: 'author',
            placeholder: '请输入',
            el: 'input',
        },
    ],
    btns: [
        {
            label: '查询',
            icon: 'Search',
            event: searchClick
        },
        {
            label: '重置',
            icon: 'Pointer',
            event: () => {
                Object.keys(toolBar.value.form).forEach((key: string) => {
                    toolBar.value.form[key] = ''
                })
                state.value.refresh = 1
            },
        },
    ],
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
    display: none;
    width: 10px;
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>